import React from 'react';
import { Steps, Button, message } from 'antd';
const { Step } = Steps;



const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
    };
  }

  next() {
    this.setState(({ current })=>({current:current+1}));
  }

  prev() {
    this.setState(({ current })=>({current:current-1}));
  }

  render() {
    const { current } = this.state;
    return (
      <div>
        <style>
          {`
          .steps-content {
            margin-top: 16px;
            border: 1px dashed #e9e9e9;
            border-radius: 6px;
            background-color: #fafafa;
            min-height: 200px;
            text-align: center;
            padding-top: 80px;
          }
          
          .steps-action {
            margin-top: 24px;
          }
          `}
        </style>
        <Steps current={current}>
          {steps.map(item =>  <Step key={item.title} title={item.title} /> )}
        </Steps>

        <div className="steps-content">{steps[current].content}</div>

        <div className="steps-action">
          {current < steps.length - 1 && ( <Button type="primary" onClick={() => this.next()}> Next </Button> )}
          {current === steps.length - 1 && ( <Button type="primary" onClick={() => message.success('Processing complete!')}> Done </Button> )}
          {current > 0 && ( <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}> Previous </Button> )}
        </div>
      </div>
    );
  }
}
